<template>
  <div class="wrapper">
    <el-container>
      <el-header>
        <h1 class="title">人人旅游网</h1>
      </el-header>
      <el-menu
        class="el-menu-demo"
        mode="horizontal"
        active-text-color="#ffd04b"
      >
        <el-menu-item index="1" @click="handleClick"><router-link to="/manage/usermanage">用户管理</router-link></el-menu-item>
        <el-submenu index="2">
          <template slot="title">内容管理</template>
          <el-menu-item index="2-1" @click="handleClick"><router-link to="/manage/contentmanage/publishcontent">发布内容</router-link></el-menu-item>
          <el-menu-item index="2-2" @click="handleClick"><router-link to="/manage/contentmanage/querycontent">查看内容</router-link></el-menu-item>
        </el-submenu>
        <el-menu-item index="3" @click="handleClick"><router-link to="/manage/guestbook">留言管理</router-link></el-menu-item>
        <el-menu-item index="4" @click="doLogout">退出</el-menu-item>
      </el-menu>
      <el-container>
        <el-main>
			<div>
				<router-view></router-view>
			</div>
          <div class="block" v-if="isShowmadeng" >
            <el-carousel height="420px" :interval="1000">
              <el-carousel-item v-for="item in picture" :key="item.id">
               <img :src="item.view" class="image">
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "Index",
  data() {
    return {
      login_user: {},
	  isShowmadeng:true,
      picture: [
        { id: 0, view: require('../assets/11.jpg' )},
        { id: 1, view: require('../assets/22.jpg')},
        { id: 2, view: require('../assets/33.jpg' )},
        { id: 3, view: require('../assets/44.jpg')},
      ],
    };
  },
  mounted() {
    this.login_user = JSON.parse(localStorage.getItem("login_user"));
  },
  methods: {
	handleClick(){
		this.isShowmadeng = false;
	},
    doLogout() {
      // let url='/LoginController';
      let url = "/loginController/logout";
      let param = "act=logout";
      this.$axios
        .post(url, param)
        .then((resp) => {
          localStorage.removeItem("login_user");
          this.$router.push("/Login");
        })
        .catch((err) => {
          console.log("err=", err);
        });
    },
  },
};
</script>

<style scoped="scoped">
.title {
  font-size: 50px;
}
.wrapper {
  height: 800px;
}
.el-header {
  background-color: rgba(245, 241, 235, 0);
  color: #fff;
  text-align: center;
  line-height: 100px;
  font-size: 50px;
  height: 100px !important;
}
.el-menu {
  width: 100%;
  background-color: #fff;
}
.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}
.el-carousel__item h3 {
  color: #695b47;
  font-size: 14px;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
img{
     /*设置图片宽度和浏览器宽度一致*/
      width:100%;
      height:inherit;
    }
</style>
